import React from 'react';
//验证码 组件封装
import axios from 'axios'
import {useEffect,useState,forwardRef,useImperativeHandle} from 'react'
import Pts from 'prop-types'
const IdentifyinCode =forwardRef ((props,ref) => {
    const [imgurl, setimgurl] = useState('');
    useEffect(() => {
        getyanzm()
    },[]);//依赖项为空的时候只有初始执行
    const getyanzm=()=>{
        axios.get('https://reactapi.iynn.cn/captcha/api/math').then(res=>{
            console.log('图形验证码',res);
            if(res.status==200){
                setimgurl(res.data.img)
//                 将后端返回的key保存在父组件中，这样不会导致第二个验证码
// 组件服用的时候，第二次返回的key覆盖第一次返回的key    
// 通过子传父的方式, 调用父组件中的saveKey方法，将key 传递给父组件
                props.saveKey(res.data.key)
    }
        })
    }
    // 定义一个点击刷新事件
    const Refresh=()=>{
        getyanzm()
    }
    // 需要将函数子组件的数据和方法导出,借助hook函数useImperativeHandle
    useImperativeHandle(ref,()=>{
        return{
            //把验证码刷新方法传给密码登录父组件
            Refresh
        }
    })
    return (
        <div>
            <img src={imgurl} onClick={()=>Refresh()} width={props.width} height={props.height}/>
        </div>
    );

})
// 属性默认值
IdentifyinCode.defalult={
    width:140,
    height:40
}
 // 属性约束
 IdentifyinCode.protoType= {
    saveKey:Pts.func.isRequired,
    width:Pts.number,
    height:Pts.number   
}

export default IdentifyinCode;
